<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康证管理系统</title>
    <link rel="stylesheet" href="css/styles.css">
    <style>
        .health-card-list {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        
        .health-card-list th, .health-card-list td {
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .health-card-list th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        
        .health-card-list tr:hover {
            background-color: #f5f5f5;
        }
        
        .action-btn {
            padding: 5px 10px;
            margin-right: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .view-btn {
            background-color: #007bff;
            color: white;
        }
        
        .delete-btn {
            background-color: #dc3545;
            color: white;
        }
        
        /* 搜索框样式 */
        .search-box {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .search-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #007bff;
        }
        
        .batch-actions {
            margin: 20px 0;
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .card-checkbox {
            width: 18px;
            height: 18px;
        }
        
        .empty-message {
            text-align: center;
            padding: 20px;
            color: #666;
            font-size: 16px;
        }
        
        .confirm-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            display: none;
        }
        
        .dialog-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            max-width: 400px;
            width: 90%;
        }
        
        .dialog-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        /* 标题栏样式增强 */
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .system-title {
            position: relative;
        }
        
        .regenerate-btn {
            background-color: #007bff;
            color: white;
            padding: 5px 15px;
            border: 1px solid white;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .regenerate-btn:hover {
            background-color: white;
            color: #007bff;
        }
    </style>
</head>
<body>
    <div class="system-title">
        <div class="header-container">
            <h1>健康证管理系统</h1>
            <a href="javascript:void(0);" id="backToHomeBtn" class="regenerate-btn">返回首页</a>
        </div>
    </div>
    
    <div class="container single-panel">
        <div class="query-section">
            <h2>健康证列表</h2>
            
            <!-- 搜索功能 -->
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="输入姓名或编号搜索..." class="search-input">
                <button id="searchBtn" class="action-btn view-btn">搜索</button>
                <button id="clearSearchBtn" class="action-btn">清除</button>
            </div>
            
            <div class="batch-actions">
                <button id="selectAllBtn" class="action-btn view-btn">全选</button>
                <button id="deselectAllBtn" class="action-btn view-btn">取消选择</button>
                <button id="deleteSelectedBtn" class="action-btn delete-btn">删除选中</button>
                <span id="selectedCount">已选择: 0</span>
            </div>
            
            <table id="healthCardList" class="health-card-list">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll" class="card-checkbox"></th>
                        <th>姓名</th>
                        <th>编号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="healthCardListBody">
                    <!-- 健康证列表将通过JavaScript动态生成 -->
                </tbody>
            </table>
            <div id="emptyMessage" class="empty-message">
                暂无健康证记录
            </div>
        </div>
    </div>
    
    <!-- 确认对话框 -->
    <div id="confirmDialog" class="confirm-dialog">
        <div class="dialog-content">
            <h3>确认删除</h3>
            <p id="confirmMessage">确定要删除选中的健康证记录吗？此操作不可恢复。</p>
            <div class="dialog-actions">
                <button id="cancelDeleteBtn" class="action-btn view-btn">取消</button>
                <button id="confirmDeleteBtn" class="action-btn delete-btn">确认删除</button>
            </div>
        </div>
    </div>

    <script src="js/api.js"></script>
    <script src="js/query.js"></script>
    <script>
        // 返回首页按钮点击事件，添加清除数据功能，使其与重新填写按钮效果一致
        document.getElementById('backToHomeBtn').addEventListener('click', function() {
            // 清除现有健康证数据，与重新填写按钮功能一致
            localStorage.removeItem('healthCardData');
            
            // 跳转到健康证修改页面，添加时间戳确保刷新
            const timestamp = new Date().getTime();
            window.location.href = 'index.html?t=' + timestamp;
        });
    </script>
</body>
</html> 